<template>
	<div class="addUpdate-box">
		<div class="topBox">
			<span class="el-icon-s-data">热度图片添加.添加</span>
			<router-link to="/backendManage/hotPicturc">
				<b>返回列表</b>
			</router-link>
			<button class="el-icon-document-checked" @click="addUpdate()">保存...</button>
		</div>
		<div class="addUpdateList">
			<div class="addUpdateListSon1">
				<el-image style="width: 40vh;height: 40vh;"
						:src="`http://127.0.0.1/api/public/showimg/${types.picture}`">
				</el-image>
				<el-upload class="avatar-uploader" :multipe="false"
				:show-file-list="true" :auto-upload="false"
				:before-upload="beforeAvatarUpload" 
				:file-list="fileList"
				:on-change="handleChange"
				 action = "uploadAction"
				list-type="picture"
				accept="image/jpg,image/jpeg,image/png">
				<h2>点击这里更新图片</h2>
				</el-upload>
			</div>
			<div class="addUpdateListSon2">
				<p>类型-整数</p>
				<el-input v-model="types.type" style="width: 85%; margin: 30px auto;"></el-input>
				<p>优先级-整数</p>
				<el-input v-model="types.hot" style="width: 85%; margin: 30px auto;"></el-input>
				<p>描述</p>
				<el-input
				  v-model="types.memo"
				  type="textarea"
				  placeholder="请输入内容"
				  style="width: 85%; margin: 30px auto;">
				</el-input>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'AddUpdateHotPicturc',
		data(){
			return{
				typeList:[],
				fileList:[],
				types:{}
			}
		},
		methods:{
			addUpdate(){
				console.log(this.types);
				let fd=new FormData();
				fd.append("id",this.types.id);
				if(this.fileList[0]){
					fd.append("pic",this.fileList[0].raw);
				}
				fd.append("picture",null);
				fd.append("type",this.types.type);
				fd.append("hot",this.types.hot);
				fd.append("memo",this.types.memo);
				this.$postf("/api/adm/hot/add",fd)
				.then((resp)=>{
					console.log(resp.data);
					this.types=resp.data.data;
					this.$message("修改成功！！");
					this.fileList = [];
					console.log(this.types);
				})
			},
			findById(){
				if(this.$route.query.id!=0){
					this.$get("/api/adm/hot/findById/"+this.$route.query.id)
					.then((resp)=>{
						this.types=resp.data.data;
						console.log(this.types);
					})
				}else{
					this.types={};
					this.types.id=0;
				}
			},
			//检查上传的文件或图片是否按照要求
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;
				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			//获取到需要上传的文件或图片函数
			handleChange(file,fileList){
				this.fileList = fileList;
				console.log("==========================================");
				console.log(this.fileList);
			},
		},
		mounted(){
			this.findById();
		}
	}
</script>

<style scoped>
	.addUpdate-box{
		width: 100%;
		height: 100%;
	}
	.topBox{
		width: 100%;
		height: 60px;
		border-bottom: 1px solid #409eff;;
	}
	.topBox span{
		width: 25%;
		line-height: 60px;
		font-size: 20px;
		font-weight: 1000;
	}
	.topBox b{
		width: 25%;
		line-height: 60px;
		font-size: 20px;
		font-weight:200;
		color: #409eff;
	}
	.topBox button{
		border: none;
		background-color: white;
		width: 10%;
		margin-left: 10%;
		line-height: 60px;
		font-size: 20px;
		font-weight:200;
		color: #409eff;
	}
	.addUpdateList{
		margin-top: 30px;
		width: 100%;
		height: 60%;
		display: flex;
	}
	.addUpdateListSon1{
		width: 50%;
		height: 100%;
	}
	.addUpdateListSon2{
		width: 50%;
		height: 100%;
	}
	.addUpdateListSon2 p{
		display: flex;
		margin-left: 7.5%;
		font-size: 18px;
	}
</style>